<template>
  <el-card class="box-card">
    <div slot="header" class="box-header">
      <span>装备资料</span>
      <el-button style="float: right; padding: 3px 0" type="text">X</el-button>
    </div>
    <div>
      <el-table ref="filterTable" :data="filterTableData">
        <el-table-column label="装备" sortable width="180">
          <template slot-scope="scope">
            <el-avatar
              shape="square"
              :size="40"
              :src="
                'https://game.gtimg.cn/images/yxzj/img201606/itemimg/' +
                scope.row.item_id +
                '.jpg'
              "
            ></el-avatar>
          </template>
        </el-table-column>
        <el-table-column
          prop="item_id"
          label="装备编号"
          sortable
          width="100"
        ></el-table-column>
        <el-table-column prop="item_name" label="装备名称" width="100">
        </el-table-column>
        <el-table-column prop="item_type" label="装备类型" width="100">
        </el-table-column>
        <el-table-column prop="price" label="出售价格" width="180">
        </el-table-column>
         <el-table-column prop="total_price" label="总价格" width="180">
        </el-table-column>
        <el-table-column
          prop="des1"
          label="装备描述"
          width="150"
        ></el-table-column>

        <el-table-column>
          <template #header>
            <el-input
              v-model="searchValue"
              size="mini"
              placeholder="输入装备名称关键字模糊搜索"
            />
          </template>
          <template slot-scope="scope">
            {{ scope.row.des2 }}
          </template>
        </el-table-column>
      </el-table>

      <el-row type="flex" justify="space-between">
        <el-col class="el-col-left" :span="12">
          <el-select v-model="selectValue" placeholder="请选择装备类型">
            <el-option label="全部装备" value=""></el-option>

            <el-option
              v-for="item in typesData"
              :key="item.item_type_id"
              :label="item.item_type_name"
              :value="item.item_type_id"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col class="el-col-right" type="flex" justify="space-between">
          <el-pagination
            layout="prev, pager, next"
            :total="tableData.length"
            :page-size="pageSize"
            @current-change="currentChange"
          >
          </el-pagination>
        </el-col>
      </el-row>
    </div>
  </el-card>
</template>
<script>
export default {
  data() {
    return {
      tableData: [],
      searchValue: "", //搜索关键字
      selectValue: "", //下拉关键字
      pageSize: 6, //每页多少条
      pageNum: 1, //当前页
      typesData: [
        {
          item_type_id: "1",
          item_type_name: "攻击",
        },
          {
          item_type_id: "2",
          item_type_name: "法术",
        },
          {
          item_type_id: "3",
          item_type_name: "防御",
        },
          {
          item_type_id: "4",
          item_type_name: "移动",
        },
          {
          item_type_id: "5",
          item_type_name: "打野",
        },
         {
          item_type_id: "7",   //没有6
          item_type_name: "游走",
        }
      ], //装备类型数据
    };
  },
  created() {
    this.query();
  },
  methods: {
    query() {
      fetch("http://47.241.102.141:3000/items")
        .then((response) => response.json())
        .then((data) => {
          this.tableData = data; //数组中存储完整数据 通过filter实现
          console.log(data);
        });
    },
    currentChange(val) {
      this.pageNum = val;
    },
  },
  computed: {
    //u过滤数据实现分页和搜索效果  这个做法有点难理解  建议使用两个数组 倒换数据
    filterTableData() {
      //先搜索
      let newTable = this.tableData.filter((item) => {
        return (
          !this.searchValue || item.item_name.includes(this.searchValue.trim())
        );
      });

      //在分类
      let newTable2 = newTable.filter((item) => {
        return !this.selectValue || item.item_type == this.selectValue;
      });

      //在分页  搜索的数据必须在第一页
      if (newTable2.length <= this.pageSize) {
        return newTable2;
      } else {
        let finalTable = newTable2.filter((item, index) => {
          let start = (this.pageNum - 1) * this.pageSize;
          let end = start + this.pageSize;
          return index >= start && index < end;
        });
        return finalTable;
      }
    },
  },
};
</script>
<style>
.box-card {
  width: 90%;
}

.box-header {
  display: flex;
  justify-content: space-between;
}

.el-row {
  padding-top: 20px;
}

.el-col-left {
  text-align: left;
}
.el-col-right {
  text-align: right;
}
</style>